<template>
    <div id="app">
      <!-- <MyDay06/> -->
      <!-- ----过渡动画-------- -->
      <!-- <MyDay08/> -->
      <!-- -封装调取axios- -->
      <!-- <MyDay09/> -->
      <!-- 插槽 父传子传递的是标签，子传父传递的是值-->
      <!-- 默认插槽
      在父组件中使用的子组件里面包裹的内容，在子组件上使用slot进行接收 -->
      <!-- <MyDay10>
        <h1>我是测试默认插槽</h1>
      </MyDay10>
      <hr>
      <MyDay10>
        <h1>我是测试默认插槽</h1>
      </MyDay10> -->
      <!-- 具名插槽
       在父组件中使用的子组件里面包裹的内容,
       需要给定义别名slot定义或使用v-solt:名称，使用v-slot 时需要在template上使用
       在子组件上使用slot进行接收时还要添加name名称接收-->
      <!-- <MyDay10>
        <h1>我是测试默认插槽</h1>
      </MyDay10>
      <hr>
      <MyDay10>
        <h1 slot="center">我是测试具名插槽</h1>
      </MyDay10>
      <hr>
      <MyDay10>
        <template v-slot:aaa>
          我是测试具名插槽2222222222
          <ul>
            <li v-for="(item,index) of dataList" :key="index+item">{{ item }}</li>
          </ul>
        </template>
      </MyDay10> -->
      <!-- 作用域插槽
       在父组件中使用的子组件里面包裹的内容,需要在template中添加scope或slot-scope接收值
      在子组件中使用slot标签中使用:名称=值（不要绑定已有的属性如class）-->
      <!-- <MyDay10>
        <template scope="baseList">
          我是测试作用域插槽
          <h1>{{ baseList }}</h1>
          <ul>
            <li v-for="(item,index) of baseList" :key="item+index">
              {{ item }}
              {{ index }}
              <h1 v-for="(items,index) of item" :key="index+items">{{ items }}</h1>
            </li>
          </ul>
        </template>
      </MyDay10> -->
      <!-- <hr>
      <MyDay10>
        <template slot-scope="baseList">
          我是测试作用域插槽
          <h1>{{ baseList }}</h1>
          <ul>
            <li v-for="(item,index) of baseList" :key="item+index">
              {{ item }}
              {{ index }}
              <h1 v-for="(items,index) of item" :key="index+items">{{ items }}</h1>
            </li>
          </ul>
        </template>
      </MyDay10> -->
      <!-- scope与slot-scope与v-slot区别 -->
      <!-- 从 vue2.6 开始，Vue 为具名插槽和作用域插槽引入了一个全新的语法，即v-slot 指令。
      目的就是想统一 slot 和 scope-slot 语法，使代码更加规范和清晰。 -->
    
    </div>
  </template>
  
  <script>
  
  // import MyDay06 from './components/day06.vue'
  // import MyDay07 from './components/day07.vue'
  // import MyDay08 from './components/day08.vue'
  // import MyDay09 from './components/day09.vue'
  import MyDay10 from './components/day10.vue'
  
  
  
  export default {
    name: 'App',
    data () {
      return{
        dataList:[1,2,3,4,5]
      }
    },
    components: {
      // MyDay06,
      // MyDay08,
      // MyDay09,
      MyDay10,
    },
    methods:{
     
    },
    mounted() {
    
    },
  }
  </script>
  
  <style>
  #app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
  }
  </style>
  